<template>
  <a-modal v-model:visible="modalVisible" title="创建角色" width="65vw" @before-ok="handleBeforeOk" @close="close" unmount-on-close>
    <page-form :model="form" layout="vertical" div="true" ref="formRef">
      <page-form-row>
        <page-form-item field="role" label="角色名称" size="1/2" :rules="{ message: '请输入角色名称', required: true }">
          <i-input placeholder="请输入" :max-length="20" v-model="form.role" />
        </page-form-item>
        <page-form-item field="description" label="备注" size="1/2">
          <i-input placeholder="请输入" :max-length="200" v-model="form.description" />
        </page-form-item>
      </page-form-row>
      <page-form-row>
        <page-form-item size="1">
          <div class="arco-form-item-label" style="margin-right: 16px">配置</div>
          <a-button type="primary" @click="useRole">使用其他角色配置</a-button>
          <a-tooltip content="将其他角色的功能权限引入到当前角色">
            <icon-question-circle style="font-size: 16px; margin-left: 6px; color: #4e5969" />
          </a-tooltip>
        </page-form-item>
      </page-form-row>
      <page-form-row>
        <page-form-item size="1/2">
          <permissionTable ref="PcTableRef" @checkChange="treeChangedCode" title="PC端后台权限" :index="0" />
        </page-form-item>
        <page-form-item size="1/2">
          <permissionTable ref="AppTableRef" @checkChange="treeAppChangedCode" title="APP端后台权限" :index="1" />
        </page-form-item>
      </page-form-row>
    </page-form>
    <!-- 复制其他角色配置 -->
    <a-modal class="copyModal" title="复制其他角色配置" v-model:visible="roleVisible" :on-before-ok="handleRoleOk">
      <page-form-item label="角色名称" size="1">
        <a-select placeholder="请输入" v-model="selectedRole" @change="changeRole">
          <a-option v-for="item in allRoleList" :key="item.id" :value="item.id" :label="item.role" />
        </a-select>
      </page-form-item>
    </a-modal>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { roleCreate, getEpList } from '@/api/merchant/role'
  import { Modal, Message } from '@arco-design/web-vue'
  import permissionTable from '../components/permissionTable.vue'

  const emits = defineEmits(['ok'])

  const formRef = ref() // 表单校验
  const form = ref({})
  const PcTableRef = ref(null)
  const AppTableRef = ref(null)

  const modalVisible = ref(false)
  const close = () => {
    modalVisible.value = false
    form.value = {}
  }
  const open = () => {
    modalVisible.value = true
  }
  defineExpose({ open })

  const pcChanged = ref('')
  const appChanged = ref('')
  const treeChangedCode = (val) => {
    pcChanged.value = val
  }
  const treeAppChangedCode = (val) => {
    appChanged.value = val
  }

  // 提交
  const handleBeforeOk = (done) => {
    formRef.value.validate((error) => {
      if (!error) {
        const totalList = pcChanged.value.concat(appChanged.value)
        form.value.resourceIds = totalList.join(',')
        form.value.id = ''
        roleCreate(form.value).then((res) => {
          Message.success(res.message)
          emits('ok')
          done()
        })
      } else {
        done(false)
      }
    })
  }

  // copy其他角色配置
  const checkedRoleId = ref({})
  const selectedRole = ref()
  const allRoleList = ref([])
  const roleVisible = ref(false)
  const useRole = () => {
    roleVisible.value = true
  }
  // 获取角色list
  const getRoleData = () => {
    getEpList().then((res) => {
      allRoleList.value = res.result
    })
  }
  const changeRole = (val) => {
    checkedRoleId.value = val
  }
  // 选中
  const handleRoleOk = async () => {
    if (selectedRole.value) {
      Modal.confirm({
        title: '提示',
        cancelText: '取消',
        okText: '确认',
        bodyStyle: {
          'text-align': 'center',
        },
        content: '请确认是否使用已选角色的配置？当前角色的功能权限将会被覆盖',
        onOk: () => {
          roleVisible.value = false
          form.value.id = checkedRoleId.value
          selectedRole.value = ''
          PcTableRef.value.getRoleList(form.value.id)
          AppTableRef.value.getRoleList(form.value.id)
          return true
        },
      })
    } else {
      Message.error('请选择角色')
      return false
    }
  }
  onMounted(() => {
    getRoleData()
  })
</script>
<style lang="less" scoped>
  .fx {
    display: flex;
    justify-content: space-between;
  }
</style>
